<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">商家中心</text>
    </view>

    <!-- 营业状态开关 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">营业状态</text>
        <switch :checked="shopStatus.checked" @change="toggleShopStatus" />
      </view>
    </view>

    <!-- 功能入口列表 -->
    <view class="function-list">
      <view class="function-item" @click="navigateToBusinessHours">
        <image class="function-icon" src="/static/icons/time-setting.png"></image>
        <text class="function-text">营业时间设置</text>
        <text class="arrow">&gt;</text>
      </view>
      
      <view class="function-item" @click="navigateToDataAnalysis">
        <image class="function-icon" src="/static/icons/data-analysis.png"></image>
        <text class="function-text">经营数据</text>
        <text class="arrow">&gt;</text>
      </view>
      
      <view class="function-item" @click="navigateToEarnings">
        <image class="function-icon" src="/static/icons/earnings.png"></image>
        <text class="function-text">收益统计</text>
        <text class="arrow">&gt;</text>
      </view>
      
      <view class="function-item" @click="navigateToEdit">
        <image class="function-icon" src="/static/icons/edit.png"></image>
        <text class="function-text">修改商家信息</text>
        <text class="arrow">&gt;</text>
      </view>
    </view>

    <!-- 商家信息展示 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">商家信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">商家名称：</text>
        <text class="info-value">{{ shopInfo.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话：</text>
        <text class="info-value">{{ shopInfo.phone }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商家地址：</text>
        <text class="info-value">{{ shopInfo.address }}</text>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {getMerchantId} from '@/utils/merchant.js';
import { getMerchantInfo } from '@/api/merchant';
import { updateMerchantStatus } from '@/api/merchant';
import { clearGlobalLoading } from '@/utils/request';


const shopInfo = ref({});
const shopStatus = ref({ checked: false });

onShow(async () => {
  const merchantId = getMerchantId();
  if (!merchantId) {
    uni.showToast({ title: '未获取到商家ID', icon: 'none' });
    return;
  }
  const { data } = await getMerchantInfo(merchantId);
  shopInfo.value = data || {};
  shopStatus.value.checked = data?.status === 1;
});

// 页面卸载时清理全局loading状态
onUnmounted(() => {
  clearGlobalLoading();
});

const toggleShopStatus = async (e) => {
  const merchantId = getMerchantId();
  if (!merchantId) {
    uni.showToast({ title: '未获取到商家ID', icon: 'none' });
    return;
  }
  
  const value = e.detail.value;
  const newStatus = value ? 1 : 0;
  
  // 先更新switch状态
  shopStatus.value.checked = value;
  
  if (value) {
    // 开启营业，直接执行
    try {
      await updateMerchantStatus({ id: merchantId, status: newStatus });
      shopInfo.value.status = newStatus;
      uni.showToast({
        title: '已开始营业',
        icon: 'none'
      });
    } catch (err) {
      // 失败时恢复switch状态
      shopStatus.value.checked = false;
      uni.showToast({ title: err.data.message || '状态更新失败', icon: 'none' });
    }
  } else {
    // 关闭营业，需要二次确认
    uni.showModal({
      content: '您确定要暂停营业吗？',
      confirmText: "取消",
      cancelText: "确定暂停",
      confirmColor: '#cbcbcb',
      cancelColor: '#ff4757',
      success: async function (res) {
        if (res.confirm) {
          // 用户点击取消，恢复switch状态为开启
          shopStatus.value.checked = true;
        } else if (res.cancel) {
          // 用户确认暂停营业
          try {
            await updateMerchantStatus({ id: merchantId, status: newStatus });
            shopInfo.value.status = newStatus;
            uni.showToast({
              title: '已暂停营业',
              icon: 'none'
            });
          } catch (err) {
            // 失败时恢复switch状态
            shopStatus.value.checked = true;
            uni.showToast({ title: '状态更新失败', icon: 'none' });
          }
        }
      }
    });
  }
};

const navigateToEdit = () => {
  uni.navigateTo({
    url: '/pages/shop/edit'
  });
}

const navigateToBusinessHours = () => {
  uni.navigateTo({
    url: '/pages/shop/business-hours'
  });
}

const navigateToDataAnalysis = () => {
  uni.navigateTo({
    url: '/pages/data/analysis'
  });
}

const navigateToEarnings = () => {
  uni.navigateTo({
    url: '/pages/earnings/index'
  });
}

</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.header {
  padding: 30rpx 0;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.section {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}

.function-list {
  background: #fff;
  border-radius: 10rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  transition: background-color 0.2s;
}

.function-item:active {
  background-color: #f5f5f5;
}

.function-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.function-text {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.arrow {
  width: 20rpx;
  height: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.business-hour-item {
  width: 100%;
  margin-bottom: 50rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.time-picker-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30rpx;
}

.time-separator {
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #999;
}

.picker {
  padding: 10rpx;
  text-align: center;
  font-size: 32rpx;
}

.time-picker {
  width: 100%;
  display: flex;
  justify-content: center;
}

.weekday-selector {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  font-size: 30rpx;
}

.weekday-selector label {
  margin-right: 20rpx;
  font-size: 30rpx;
}

.info-item {
  display: flex;
  margin: 15rpx 0;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 150rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.add-btn {
  background: linear-gradient(to right, #ff9a9e, #ff6b6b);
  color: white;
  border-radius: 10rpx;
  transition: transform 0.2s;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.add-btn:active {
  transform: scale(0.95);
}

.remove-btn {
  margin-top: 20rpx;
  color: red;
  border-radius: 10rpx;
  padding: 0 20rpx;
  transition: opacity 0.3s;
  width: 33%;
  display: block;
  height: 60rpx;
  line-height: 60rpx;
}

.business-hour-item {
  transition: opacity 0.3s;
}

.edit-btn {
  margin-top: 40rpx;
  background: linear-gradient(to right, #ff9a9e, #ff6b6b);
  color: #fff;
  font-size: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
  
  &:active {
    transform: scale(0.95);
  }
}
</style>